<template>
<div id="container">
  <el-form :model="query" ref="queryFormRef" :rules="rules" status-icon>
    <el-form-item label="请输入要查询的IP地址：" prop="ip">
      <el-input v-model="query.ip" ref = 'ip' @keyup.enter.native="queryPrivilege(queryFormRef)"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="queryPrivilege(queryFormRef)" >查询</el-button>
    </el-form-item>
  </el-form>
  <el-descriptions title="查询结果">
      <el-descriptions-item label="您查询的IP地址为:">
      {{query2.ip}}
      </el-descriptions-item>
  </el-descriptions>
  <el-table :data="tableData" style="width: 100%" empty-text="查询中">
    <el-table-column prop="serviceName" label="支持服务" width="180" />
    <el-table-column prop="url" label="url" width="180" />
  </el-table>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import axios from 'axios'

import { IPvalidatorForEl } from '../utils/IPreg'  // Validate IP address by Regex

const queryFormRef = ref<FormInstance>()
const tableData =reactive([
  {
    serviceName:'无记录',
    url:'无记录'
    }
])
const query = reactive({
  ip: "",
})

const query2 = reactive({
  ip: "无记录",
})


const rules = reactive<FormRules>({
  ip: [
    {
      required: true,
      validator: IPvalidatorForEl,
      trigger: "change"
    }
  ]
})
const queryPrivilege = async (queryFormRef: FormInstance | undefined) : Promise<string[] | undefined> => {
  query2.ip=query.ip
  //alert(query.ip)
  tableData.length=0;
  if (!queryFormRef) {
     alert('err')
    return
  }
  //let api = '/get_privilege'
  //let api = 'http://112.126.89.103:8888/Query?IP=10.38.14.93'
  
  axios.get('/Query',{
  //headers:{"Access-Control-Allow-Origin":"*"},
  params:{
          IP:query.ip
  }}
  ) 
 //axios.get(api)
    .then((response) => {
      //let data_p : [string, string]
      let data_p = response.data    
      console.log(response.data)
      //alert(response.data)
      /*
      data_p.forEach((item)=>{
        tableData.push({
        serviceName: item["GISServiceName"],
        url: '',
        })
      })
      */
      for (let i of data_p)
      {
        tableData.push({
        serviceName: i["GISServiceName"],
        url: '',
        })

      }
      if(!tableData.length){
         tableData.push({
          serviceName: '无记录',
          url: '无记录',
          })
      }
      return data_p
    })
    .catch((err) => {
      //alert(err)//error')
      console.log(err)
    })
}

</script>
